<template>
  <div class="homeContainer" ref="imgBox" style="height: 100%; width: 100%">
    <div
      class="cutArea"
      :style="{ width: cutAreaWidth + 'rem', height: cutAreaHeight + 'rem' }"
      v-show="showCutArea"
      @mousedown="dragDiv($event)"
      ref="areaBox"
      id="Drag"
    ></div>
    <div
      class="cutArea1"
      :style="{
        width: cutAreaWidth + 'rem',
        height: cutAreaHeight + 'rem',
        cursor: currentCursor,
      }"
      v-show="showMakePic"
      @mousedown="dragDiv1($event)"
      @mouseup="setCursorToGrab"
      @mouseleave="setCursorToGrab"
      ref="areaBox1"
      id="Drag1"
    >
      <div class="titleArea">
        <input
          type="text"
          class="mainTitleInput"
          v-model="mainTitleInput"
          @blur="updateMainTitle"
          placeholder="请输入主标题"
          v-show="showInputTitle"
        />
        <div
          v-show="!showInputTitle"
          class="mainTitle"
          :style="{ fontSize: picInfoSet.mainTitlePixel + 'px' }"
        >
          {{ picInfoSet.mainTitle }}
        </div>
        <div
          class="subTitle"
          :style="{ fontSize: picInfoSet.subTitlePixel + 'px' }"
        >
          {{ picInfoSet.subTitle }}
        </div>
      </div>

      <div class="mapArea">
        <div
          class="mapBorder"
          :style="{
            width: cutAreaWidth * 0.8 + 'rem',
            height: cutAreaHeight * 0.75 + 'rem',
          }"
        >
          <div class="legendPanel">
            <img src="@/assets/legend/legend.png" alt="" />
          </div>
        </div>
      </div>
      <div class="bottomArea">
        <div class="bottomContent">
          {{ picInfoSet.bottomContent }}
        </div>
        <div class="bottomPlatform">
          {{ picInfoSet.bottomPlatform }}
        </div>
      </div>
    </div>

    <div class="picShowCut" v-show="showCutArea">
      <div class="title">
        <div class="bar"></div>
        <div class="title-text">截屏打印</div>
      </div>
      <div class="content">
        <div class="areaScale">
          宽:
          <input
            type="number"
            placeholder="宽"
            v-model="dragWidth"
            @input="updateCutAreaSize"
          />
          长:
          <input
            type="number"
            placeholder="长"
            v-model="dragHeight"
            @input="updateCutAreaSize"
          />
        </div>
        <div class="picCutBtn">
          <button @click="startCut">截图</button>
          <button @click="printPic">打印</button>
        </div>
      </div>
    </div>
    <div class="picShowCut" v-show="showMakePic">
      <div class="title">
        <div class="bar"></div>
        <div class="title-text">制图打印</div>
      </div>

      <div class="content">
        <div class="areaScale">
          宽:
          <input
            type="number"
            placeholder="宽"
            v-model="dragWidth"
            @input="updateCutAreaSize"
          />
          长:
          <input
            type="number"
            placeholder="长"
            v-model="dragHeight"
            @input="updateCutAreaSize"
          />
        </div>
        <div class="picCutBtn">
          <button @click="startCut">制图</button>
          <button @click="printPic">打印</button>
        </div>
      </div>
    </div>
    <TopBar id="TopBar" style=""></TopBar>
    <div
      class="contentContainer"
      style="width: 100%; height: 100%; position: relative"
      ref="imgBox"
    >
      <div
        id="map-container"
        style="width: 100%; height: 100%"
        @contextmenu.prevent="showContextMenu($event)"
        @click="hideContextMenu"
      ></div>
    </div>
    <MapTool></MapTool>
    <MapLegend
      :dialogVisible="isMapLegendShow"
      @update:dialogVisible="isMapLegendShow = $event"
    />
    <div class="copyRightItem" v-if="showMenu" :style="contextMenuStyle">
      <button class="copy-button" @click="copyCoor">复制坐标</button>
      <button @click="userDeviceAttach" v-if="isUserDeviceAttach">
        用户设备挂接
      </button>
    </div>
  </div>
</template>

<script>
import { getUserInfo } from "@/api/login";
import "moment/locale/zh-cn";
import moment from "moment";
import TapMap from "../map/index.js";
import html2canvas from "html2canvas";
import TopBar from "./TopBar.vue";
import MapTool from "./MapTool/MapTool.vue";
import ImageLayer from "ol/layer/Image";
import { markRaw } from "vue";
import dmgis from "@/api/dmgis";
import ClipboardJS from "clipboard";
import MapLegend from "../views/SystemTool/components/MapLegend.vue";
import { transform, useGeographic, Projection, addProjection } from "ol/proj";
export default {
  name: "HomePage",
  components: {
    TopBar,
    MapLegend,
    MapTool,
  },
  data() {
    return {
      isUserDeviceAttach: false,
      showMenu: false,
      currentCursor: "grab",
      dmProjectLayer: null,
      dmserurl: process.env.VUE_APP_BASE_API + "/dmgis",
      //当前编辑实体的索引号
      currentindex: null,
      showInputTitle: true,
      mainTitleInput: "", // 用户输入的标题
      picInfoSet: {
        mainTitle: "专题图",
        subTitle: "",
        bottomContent: "",
        bottomPlatform: "",
        leftTop: "118.6135 44.7958",
        rightBottom: "120.6573 45.988",
        mainTitlePixel: 35,
        subTitlePixel: 24,
        legendPixel: 18,
      },
      legendItemGroup: {
        colorItemGroup: [
          "#ffffff",
          "#a6f28f",
          "#3dba3d",
          "#61b8ff",
          "#0000ff",
          "#ff00ff",
          "#800040",
        ],
        numItemGroup: ["0.1", "6", "15", "30", "60", "150"],
      },
      TapMap: null,
      dragWidth: "60",
      dragHeight: "40",
      cutAreaWidth: "50",
      cutAreaHeight: "35",
      DragEl: null, //拖动元素
      DragEl1: null, //拖动元素
      dragContainerEl: null, //容器元素
      // 位置差
      disX: 0,
      disY: 0,
      contextMenuStyle: {
        left: "0px",
        top: "0px",
      },
      coordinate: {},
    };
  },
  computed: {
    isMapLegendShow() {
      return this.$store.state.mapLegendShow;
    },
    showCutArea() {
      return this.$store.state.showCutArea; // 从 Vuex 获取状态
    },
    showMakePic() {
      return this.$store.state.showMakePic; // 从 Vuex 获取状态
    },
  },
  methods: {
    userDeviceAttach() {},
    copyCoor() {
      if (this.coordinate) {
        const textToCopy = `${this.coordinate.X},${this.coordinate.Y}`;
        new ClipboardJS(".copy-button", {
          text: () => textToCopy,
        });
        this.$message({ message: "复制成功", type: "success" });
      }
      this.hideContextMenu();
    },
    showContextMenu(event) {
      this.coordinate = this.$store.state.coordinate;
      this.showMenu = true;
      this.contextMenuStyle.left = `${event.pageX + 5}px`;
      this.contextMenuStyle.top = `${event.pageY + 5}px`;
    },
    hideContextMenu() {
      this.showMenu = false;
    },
    initMap() {
      this.TapMap = new TapMap("map-container");
      this.TapMap.panTo([312620.71, 658546.3], 14);
      this.TapMap.layer.initLayer();
      //调用DMGIS地图服务
      // let projection_szbj54 = new Projection({
      //   code: "szbj54",
      //   units: "m",
      // });
      let projection_szbj54 = new Projection({
        code: "sz2000",
        units: "m",
      });
      this.dmProjectLayer = new dmgis.olmap.ServiceLayer(
        "TapWaterMap",
        this.dmserurl,
        {
          maxZoom: 18,
          minZoom: 0,
          opacity: 1,
          projection: projection_szbj54,
        }
      );
      this.dmProjectLayer.InitService().then((res) => {
        let layersAttribute = res.layers.map((item) => {
          return item.name;
        });
        console.log(layersAttribute, "tapwater服务图层");
        this.$store.commit("setLayersAttribute", layersAttribute);
      });

      //创建点线面时回调
      dmgis.olmap.ServiceLayer.prototype.HandleBuildInfo = function (feature) {
        this.currentindex = feature.index;
      };
      this.$store.commit("setProjectLayer", markRaw(this.dmProjectLayer));
      //将地图对象由vuex管理
      this.$store.commit("setMap", markRaw(this.TapMap));
    },
    updateMainTitle() {
      this.picInfoSet.mainTitle = this.mainTitleInput; // 更新主标题
      this.showInputTitle = false;
    },
    //添加工程地图
    addDmProject() {
      this.dmProjectLayer.serviceLayer = new ImageLayer({ zIndex: 999 });
      this.TapMap.map.addLayer(this.dmProjectLayer.serviceLayer);
      var serviceLayer = this.dmProjectLayer.serviceLayer;

      this.dmProjectLayer.RefreshMap(
        serviceLayer,
        this.dmProjectLayer.ImgMapService,
        2
      );
      var self = this;
      this.TapMap.map.on("moveend", function (evt) {
        let frameState = evt.frameState;
        let imgSvrParam = self.dmProjectLayer.ImgMapService;
        // imgSvrParam.DispRect.minx = 47502.3425;
        // imgSvrParam.DispRect.miny = 28025.4831;
        // imgSvrParam.DispRect.maxx = 57609.0837;
        // imgSvrParam.DispRect.maxy = 40934.258;
        imgSvrParam.DispRect.minx = frameState.extent[0];
        imgSvrParam.DispRect.miny = frameState.extent[1];
        imgSvrParam.DispRect.maxx = frameState.extent[2];
        imgSvrParam.DispRect.maxy = frameState.extent[3];
        imgSvrParam.imgWid = frameState.size[0];
        imgSvrParam.imgHig = frameState.size[1];
        self.dmProjectLayer.RefreshMap(
          serviceLayer,
          imgSvrParam,
          frameState.viewState.zoom
        );
      });
      this.dmProjectLayer.serviceLayer.setVisible(false);
      dmgis.olmap.ServiceLayer.prototype.HandleFeatureInfo = function (
        feature
      ) {};
      // //获取点线面要素
      // this.refreshPoints();
      // this.refreshLines();
      // this.refreshPolygons();
    },
    //刷新点
    refreshPoints() {
      //获取点要素
      var self = this;
      dmgis.olmap.ServiceLayer.prototype.HandleFeatureInfo = function (
        feature
      ) {
        self.indexarrPoint = feature.objset;
      };
      let getfeaturePoint = this.dmProjectLayer.GetFeatureMapService("pointer");
      this.dmProjectLayer.SendFeatureMapService(getfeaturePoint);
    },
    //刷新线
    refreshLines() {
      //获取线要素
      var self = this;
      dmgis.olmap.ServiceLayer.prototype.HandleFeatureInfo = function (
        feature
      ) {
        self.indexarrLine = feature.objset;
      };
      let getfeatureLine = this.dmProjectLayer.GetFeatureMapService("line");
      this.dmProjectLayer.SendFeatureMapService(getfeatureLine);
    },
    //刷新面
    refreshPolygons() {
      //获取面要素
      var self = this;
      dmgis.olmap.ServiceLayer.prototype.HandleFeatureInfo = function (
        feature
      ) {
        self.indexarrPolygon = feature.objset;
      };
      let getfeatureLine = this.dmProjectLayer.GetFeatureMapService("area");
      this.dmProjectLayer.SendFeatureMapService(getfeatureLine);
    },
    setCursorToGrab() {
      this.currentCursor = "grab";
    },
    updateCutAreaSize() {
      // 更新cutArea的大小，同时确保宽高为正数或默认值
      this.cutAreaHeight = this.dragHeight > 0 ? this.dragHeight : 200;
      this.cutAreaWidth = this.dragWidth > 0 ? this.dragWidth : 200;
    },
    dragDiv(event) {
      // 1,计算位置差
      this.disX = event.clientX - this.DragEl.offsetLeft;
      this.disY = event.clientY - this.DragEl.offsetTop;
      //2， 获取拖动元素的高度和容器的高度 为了下面进行限制元素拖动的范围
      let dragHeight = this.DragEl.offsetHeight;
      let dragWidth = this.DragEl.offsetWidth;
      let dragContainerWidth = this.dragContainerEl.offsetWidth; //获取容器的高度和宽度
      let dragContainerHeight = this.dragContainerEl.offsetHeight;
      // 添加鼠标移动事件
      document.onmousemove = (el) => {
        // 3，获取鼠标移动位置
        let moveX = el.clientX - this.disX;
        let moveY = el.clientY - this.disY;
        // 左边界
        if (moveX <= 0) {
          moveX = 0;
        }
        // 上边界
        if (moveY <= 0) {
          moveY = 0;
        }
        //下边界  容器高度 - 拖动元素高度
        if (moveY >= dragContainerHeight - dragHeight) {
          moveY = dragContainerHeight - dragHeight;
        }
        //右边界   容器宽度 - 拖动元素宽度
        if (moveX >= dragContainerWidth - dragWidth) {
          moveX = dragContainerWidth - dragWidth;
        }
        // 5, 开始移动
        this.DragEl.style.left = moveX + "px";
        this.DragEl.style.top = moveY + "px";
      };
      document.onmouseup = () => {
        document.onmousemove = null;
      };
    },
    dragDiv1(event) {
      // 1,计算位置差
      this.disX = event.clientX - this.DragEl1.offsetLeft;
      this.disY = event.clientY - this.DragEl1.offsetTop;
      //2， 获取拖动元素的高度和容器的高度 为了下面进行限制元素拖动的范围
      let dragHeight = this.DragEl1.offsetHeight;
      let dragWidth = this.DragEl1.offsetWidth;
      let dragContainerWidth = this.dragContainerEl.offsetWidth; //获取容器的高度和宽度
      let dragContainerHeight = this.dragContainerEl.offsetHeight;
      // 添加鼠标移动事件
      document.onmousemove = (el) => {
        // 3，获取鼠标移动位置
        let moveX = el.clientX - this.disX;
        let moveY = el.clientY - this.disY;
        // 左边界
        if (moveX <= 0) {
          moveX = 0;
        }
        // 上边界
        if (moveY <= 0) {
          moveY = 0;
        }
        //下边界  容器高度 - 拖动元素高度
        if (moveY >= dragContainerHeight - dragHeight) {
          moveY = dragContainerHeight - dragHeight;
        }
        //右边界   容器宽度 - 拖动元素宽度
        if (moveX >= dragContainerWidth - dragWidth) {
          moveX = dragContainerWidth - dragWidth;
        }
        // 5, 开始移动
        this.DragEl1.style.left = moveX + "px";
        this.DragEl1.style.top = moveY + "px";
      };
      document.onmouseup = () => {
        document.onmousemove = null;
      };
    },
    async printPic() {
      // 首先对地图内容map-container进行截图
      let imgBox = this.$refs.imgBox; //refimgBox
      if (imgBox.offsetWidth === 0 || imgBox.offsetHeight === 0) {
        console.error("imgBox has zero width or height");
        return;
      }
      let scale = window.devicePixelRatio;
      let mapCanvas = await html2canvas(imgBox, {
        useCORS: true,
        allowTaint: false,
        scale: scale,
        dpi: scale,
        ignoreElements: (element) => {
          // 遍历imgBox下的每个元素节点，截图时忽略指定元素
          if (
            element.classList.contains("toolDialog") ||
            element.classList.contains("map-tool") ||
            element.classList.contains("o-title") ||
            element.classList.contains("makePicPrintContainer") ||
            element.classList.contains("picShowCut")
          ) {
            return true;
          }
        },
      });

      // 获取截图框选的位置和尺寸
      let areaBox;
      if (this.showMakePic) {
        areaBox = this.$refs.areaBox1;
      } else if (this.showCutArea) {
        areaBox = this.$refs.areaBox;
      }
      // let areaBox = this.$refs.areaBox;
      let areaBoxRect = areaBox.getBoundingClientRect();

      // 根据 areaBox 的位置和尺寸，在 mapCanvas 上裁剪出对应的区域
      let cropCanvas = document.createElement("canvas");
      cropCanvas.width = areaBoxRect.width;
      cropCanvas.height = areaBoxRect.height;
      let cropCtx = cropCanvas.getContext("2d");
      cropCtx.drawImage(
        mapCanvas,
        areaBoxRect.left - imgBox.getBoundingClientRect().left, // 计算相对偏移
        areaBoxRect.top - imgBox.getBoundingClientRect().top,
        areaBoxRect.width,
        areaBoxRect.height,
        0,
        0,
        areaBoxRect.width,
        areaBoxRect.height
      );

      // 触发打印裁剪后的图片
      this.printCanvas(cropCanvas);
    },
    async startCut() {
      // 首先对地图内容map-container进行截图
      let scale = window.devicePixelRatio;
      let imgBox = this.$refs.imgBox; //refimgBox
      let mapCanvas = await html2canvas(imgBox, {
        useCORS: true,
        allowTaint: false,
        scale: scale,
        dpi: scale,
        ignoreElements: (element) => {
          // 遍历imgBox下的每个元素节点，截图时忽略指定元素
          if (
            element.classList.contains("toolDialog") ||
            element.classList.contains("map-tool") ||
            element.classList.contains("o-title") ||
            element.classList.contains("makePicPrintContainer") ||
            element.classList.contains("picShowCut")
          ) {
            return true;
          }
        },
      }); // 检查canvas尺寸
      // 获取截图框选的位置和尺寸
      let areaBox;
      if (this.showMakePic) {
        areaBox = this.$refs.areaBox1;
      } else if (this.showCutArea) {
        areaBox = this.$refs.areaBox;
      }

      let areaBoxRect = areaBox.getBoundingClientRect();
      // // 根据 areaBox 的位置和尺寸，在 mapCanvas 上裁剪出对应的区域
      // // let ctx = mapCanvas.getContext("2d");
      let cropCanvas = document.createElement("canvas");
      cropCanvas.width = areaBoxRect.width;
      cropCanvas.height = areaBoxRect.height;
      let cropCtx = cropCanvas.getContext("2d");
      // 将需要裁剪的区域绘制到新的 canvas 上
      cropCtx.drawImage(
        mapCanvas,
        areaBoxRect.left - imgBox.getBoundingClientRect().left, // 计算相对偏移
        areaBoxRect.top - imgBox.getBoundingClientRect().top,
        areaBoxRect.width,
        areaBoxRect.height,
        0,
        0,
        areaBoxRect.width,
        areaBoxRect.height
      );
      // 触发下载裁剪后的图片
      const link = document.createElement("a");
      link.download = "Button.png";
      link.href = cropCanvas.toDataURL();
      link.click();
    },

    printCanvas(canvas) {
      const printContent = canvas.toDataURL("image/png");
      const printWindow = window.open("", "_blank");
      const htmlContent = `
          <html>
            <head>
              <title>截屏打印</title>
              <style>
                @media print {
                  /* 打印页的CSS样式 */
                  * {
                    padding: 0;
                    margin: 0;
                  }

                  ul {
                    text-decoration: none;
                    list-style-type: none;
                    text-decoration: underline;
                    font-weight: bold;
                  }
                }
              </style>
            </head>
            <body>
               <img src="${printContent}" alt="打印图片">
            </body>
          </html>
        `;
      printWindow.document.write(htmlContent);
      printWindow.document.close();
      printWindow.onload = () => {
        printWindow.print();
        printWindow.close();
      };
    },
    addTileLayer() {
      // this.TapMap.layer.getTileMapByUrl(
      //   "/data/pipline",
      //   "piplineTile_true",
      //   [46101.32565, 28025.4831, 59010.10055, 40934.258],
      //   1
      // );
      // this.TapMap.layer.getTileMapByUrl(
      //   "/data/pipline_4",
      //   "piplineTile",
      //   [46101.325650,28025.483100,59010.100550, 40934.258000],
      //   1
      // );
      // this.TapMap.layer.getTileMapByUrl(
      //   "/data/pipline_4",
      //   "piplineTile",
      //   [46101.325650,28025.483100,59010.100550,40934.258000],
      //   1
      // );
      // this.TapMap.layer.setWmsLayer(
      //   "TapWater:adapter_Info-center",
      //   "testLayer"
      // );
      // this.TapMap.layer.setWmsLayer(
      //   "TapWater:pipeline0-74mm-center",
      //   "testLayer"
      // );
      // this.TapMap.layer.setWmsLayer("TapWater:adapter_Info-taihu", "testLayer");
      // this.TapMap.layer.setWmsLayer(
      //   "TapWater:pipeline300-499mm-taihu",
      //   "testLayer"
      // );
      // this.TapMap.layer.setWmsLayer(
      //   "TapWater:pipeline300-499mm-center",
      //   "testLayer"
      // );
      // this.TapMap.layer.setWmsLayer("pipeline75-299mm-taihu", "testLayer");
      // this.TapMap.layer.setWmsLayer("pipeline75-299mm-center", "testLayer");
    },
  },
  mounted() {
    if (!JSON.parse(localStorage.getItem("userInfo"))) {
      this.$message.error("未登录，即将跳转至首页");
      localStorage.clear();
      this.$router.push("/");
    }
    let userName = JSON.parse(localStorage.getItem("userInfo")).username;

    getUserInfo({
      username: userName,
    }).then((res) => {
      localStorage.setItem("userInfo", JSON.stringify(res.data));
    });
    this.initMap();
    this.DragEl = document.getElementById("Drag");
    this.DragEl1 = document.getElementById("Drag1"); //拖拽的元素
    this.dragContainerEl = document.getElementsByClassName("content"); //拖拽的父元素
    moment.locale("zh-cn");
    this.picInfoSet.bottomContent = moment(new Date()).format("YYYY年MM月DD日");
    // setInterval(() => {
    //   moment.locale('zh-cn');
    //   this.picInfoSet.bottomContent = moment(new Date()).format(
    //     'YYYY年MM月DD日 HH:mm:ss'
    //   );
    // }, 1000);
    this.addDmProject();
    this.addTileLayer();
    this.$store.commit("addTreeDefault", "管网地图");
  },
};
</script>

<style lang="scss" scoped>
.cutArea {
  // width: 60rem;
  // height: 45rem;

  position: absolute;
  border-radius: 10px;
  border: 3px dashed rgb(0, 0, 0);
  z-index: 1;
  left: 15rem;
  top: 7rem;
}
.cutArea1 {
  // width: 60rem;
  // height: 45rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  border-radius: 5px;
  border: 3px dashed rgb(0, 0, 0);
  z-index: 1;
  left: 19rem;
  top: 8rem;
  overflow: hidden;
  .titleArea {
    position: absolute;
    top: 0;
    width: 100%;
    height: 12%;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    .mainTitleInput {
      margin-top: 1rem;
      font-size: 1rem;
    }
    .mainTitle {
      // font-size: xx-large;
      font-size: var(--dynamic-font-size);
    }
    .subTitle {
      color: #666666;
      font-size: x-large;
    }
  }
  .bottomArea {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 10%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-right: 20%;
    .bottomContent {
      display: flex;
      flex-direction: row;
      .legend {
        .colorItem {
          display: flex;
          .colorBox {
            width: 30px;
            height: 15px;
          }
        }
        .numItem {
          display: flex;
          gap: 6%;
        }
      }
    }
  }

  .mapArea {
    border: 100vw solid #fff;
    .mapBorder {
      border: 2px solid #7f7f7f;
      .legendPanel {
        position: relative;

        height: 100%;
        width: 100%;
        img {
          width: 12rem;

          position: absolute;
          right: 0;
          bottom: 0;
        }
      }
    }
  }
}
.picShowCut {
  position: absolute;

  background: #285383;
  z-index: 3;
  top: 11.5rem;
  right: 3rem;
  z-index: 999;
  .title {
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 18px;
    .bar {
      width: 5px; /* 小竖条的宽度 */
      height: 20px; /* 小竖条的高度 */
      background-color: white; /* 小竖条的颜色 */
      margin: 10px; /* 小竖条和文字之间的间距 */
    }
  }
  .content {
    padding: 1.5rem;
    button {
      width: 90px;
      margin: 0 5px;
      color: #fff;
      background-color: #3c83c8;
      border-radius: 2px;
      cursor: pointer;
    }
    .picCutBtn {
      right: 5vw;
      display: flex;
      top: 2vw;
    }

    .areaScale {
      right: 2vw;
      top: -4vh;
      margin-bottom: 1.5rem;
      color: #fff;
      display: inline-block;
      input {
        width: 50px;
        margin: 0px 7px;
        color: #fff;
        background-color: rgb(60, 100, 133);
        border-radius: 2px;
        border: 1px solid #ccc;
        text-align: center;
      }
    }
  }
}

button {
  border: none !important;
}
button:active,
button:focus {
  outline: none;
  border: none;
}
.copyRightItem {
  position: absolute;
  background-color: white;
  border: 1px solid #ccc;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  button {
    background: transparent;
    border-radius: 2px;
    cursor: pointer;
    text-align: left;
  }
  button:hover {
    background: #ccc;
  }
}
</style>
